<template>
  <el-dialog title="退案" :visible.sync="dialogVisible" width="700px">
    <el-form ref="form" :model="form" :rules="rules" label-width="140px">
      <el-form-item label="退案日期">
        <el-date-picker
          v-model="form.date"
          type="date"
          placeholder="选择日期"
          style="width: 100%"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="附件（解除协议）">
        <!-- <el-upload
          class="upload-demo"
          :action="uploadUrl"
          multiple
          :show-file-list="true"
          :on-success="successUpload"
          :headers="headers"
        >
          <div v-for="form.attachments">{{ form.attachments }}</div>
          <el-button size="small" type="primary" v-else>点击上传</el-button>
        </el-upload> -->

        <el-upload
          class="upload-demo"
          :action="uploadUrl"
          multiple
          ref="upload"
          :on-success="successUpload"
          :headers="headers"
          :file-list="form.attachments"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="退案原因" prop="reason">
        <el-input v-model="form.reason"></el-input>
      </el-form-item>
      <el-form-item label="审核人员" class="taxAddress" prop="reviewers">
        <el-select
          multiple
          v-model="form.reviewers"
          filterable
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in userList"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="抄送人员" class="taxAddress" prop="makeList">
        <el-select
          multiple
          v-model="form.makeList"
          filterable
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in userList"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="onSave">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getToken } from "@/utils/auth";
import { getAllUser } from "@/api/met";
import { revoke } from "@/api/case/case";
export default {
  data() {
    return {
      dialogVisible: false,
      form: {},
      userList: [],
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      headers: { Authorization: "Bearer " + getToken() },
      rules: {
        reviewers: {
          required: true,
          message: "请选择审核人员",
          trigger: "change",
        },
        reason: {
          required: true,
          message: "请输入退案原因",
          trigger: "blur",
        },
      },
    };
  },
  methods: {
    onSave() {
      this.$refs.form.validate((bol) => {
        if (bol) {
          console.log(this.$refs.upload.uploadFiles);
          let param = { ...this.form };
          param.attachments = this.$refs.upload.uploadFiles.filter((item) => {
            item.filename = item.name;
            item.url = item.response?.url;
            return item;
          });
          revoke(param).then((res) => {
            this.$message.success("保存成功");
            this.dialogVisible = false;
            this.$parent.getList();
          });
        }
      });
    },
    onShow(row) {
      this.form = {
        reviewers: [], // 审核人员
        makeList: [], // 抄送人员
        reason: "",
        date: new Date(),
        attachments: [],
        url: "",
      };
      this.dialogVisible = true;
      this.row = row;
      this.form.id = row.id;
      this.$refs.form?.clearValidate();
    },
    getAllUser() {
      getAllUser().then((res) => {
        this.userList = res.data;
      });
    },
    successUpload(response, file, fileList) {
      //合同上传成功
      console.log("上传成功", response, file, fileList);
      if (response.code == 200) {
        this.form.url = response.url;
        console.log("response", response, file, fileList);
      } else {
        this.$message.error(response.msg);
      }
    },
  },
  mounted() {
    this.getAllUser();
  },
};
</script>

<style></style>
